<template>
	<view class="uiwu uiwu-ios" :style="{'background-image':`url(${info.invite_qrcode})`}">
		<!-- <image class="uiwu-image" :src="info.invite_qrcode" mode="widthFix" style="width: 420rpx;"></image> -->
		<uiwu-footer bg-color="transparent">
			<view class="uiwu-footer">
				<view class="uiwu-footer-box" @tap="saveBtn">
					<text class="uiwu-flex-center">保存二维码至手机</text>
					<text></text>
				</view>
			</view>
		</uiwu-footer>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import { invitePoster } from '@/api/api';
	import { uiwu } from '@/config/config';
	const info = ref({
		invite_qrcode:"",
		invite_poster:''
	})
	const getinvitePoster = async () : Promise<any> => {
		const { data } = await invitePoster({});
		info.value = data
	}
	/**
	 * 保存图片
	 */
	const saveBtn = () => {
		uiwu.loading('正在保存...',true)
		uni.downloadFile({
			url:info.value.invite_qrcode,
			success: ({tempFilePath}) => {
				uni.saveImageToPhotosAlbum({
					filePath:tempFilePath,
					success: () => {
						uni.hideLoading()
						uiwu.toast('图片已保存至相册')
					},
					fail: (err) => {
						uni.hideLoading()
						uiwu.toast(`图片保存失败${JSON.stringify(err)}`)
					}
				})
			},
			fail: (err) => {
				uni.hideLoading()
				uiwu.toast(`文件下载失败${JSON.stringify(err)}`)
			}
		})
	}
	onLoad(()=>{
		getinvitePoster()
	})
</script>

<style lang="scss">
	.uiwu{
		width: 100%;
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		background: url('../../static/haibaobg.png') no-repeat 0 0;
		background-size: 100% 100%;
	}
	.uiwu-image{
		position: absolute;
		left: 0;
		right: 0;
		top: 435rpx;
		margin: auto;
	}
	.uiwu-footer{
		width: 100%;
		padding: 15rpx 24rpx;
		&-box{
			position: relative;
			width: 100%;
			height: 88rpx;
			text{
				width: 100%;
				height: 88rpx;
				background: #FAC500;
				border-radius: 40rpx;
				border: 3rpx solid #231815;
				position: absolute;
				left: -5rpx;
				top: -6rpx;
				z-index: 9;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				&:nth-child(2){
					z-index: 8;
					left: 5rpx;
					top: 6rpx;
					background: #FCE5C7;
				}
			}
		}
	}
</style>
